<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>常熟理工问卷系统</title>
    <link rel="stylesheet" th:href="@{asserts/bootstrap4/css/bootstrap.css}">
    <style>
        *{
            margin: 0px;
        }
        body{
            /*background-color: #F5F5F5;*/
            background: url("/asserts/img/loginBackground.jpg") #FCFDFF no-repeat;
            background-size: 1280px 720px;
        }
        .form{
            width: 350px;
            height: 400px;
            margin: 130px 0% 0px auto;
            padding-top: 40px;
            background-color: white;
            box-shadow: gray 0px 0px 1px;
            border-radius: 10px;
        }
        .logo>img{
            height: 100px;
            width: 100px;
        }
        .title1{
            font-weight: bold;
            font-size: 35px;
            text-align: center;
            font-family: 华文行楷,黑体;
        }
        .title1>span{
            color: #0084FF;
        }
        .form-control{
            width: 80%;
            margin: 20px auto 0px;
        }
        .login_username{
            background: url(/asserts/img/icon-user-1.png) no-repeat 10px 10px;
            padding-left: 35px;
        }
        .login_password{
            background: url(/asserts/img/icon-pass-1.png) no-repeat 10px 10px;
            padding-left: 35px;
        }
        .userIdentity{
            width: 80%;
            margin: 20px auto 15px;
        }
        .myBtn{
            width: 100%;
        }
        .errorMsg{
            width: 80%;
            color: red;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form">
            <div class="title1">
                <span>欢 迎 登 录</span>
            </div>
            <form id="form" th:action="@{/login}" method="post">
                <div class="form-group">
                    <input type="text" class="form-control login_username" placeholder="学号" name="username" autocomplete="off">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control login_password" placeholder="姓名" name="password" autocomplete="off">
                </div>
                <div class="userIdentity">
                    <span>登录身份：</span>
                    <select name="userId" id="userId">
                        <option value="student">学生</option>
                        <option value="teacher">管理员</option>
                    </select>
                    <!--<div style="margin-top: 15px">-->
                        <!--(学生登录密码为姓名)-->
                    <!--</div>-->
                </div>
                <div class="errorMsg" th:text="${msg}"></div>
                <div class="userIdentity">
                    <input class="btn btn-primary myBtn" value="登 录">
                </div>
            </form>
        </div>
    </div>
</body>
<script th:src="@{asserts/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{asserts/js/popper.min.js}"></script>
<script th:src="@{asserts/bootstrap4/js/bootstrap.js}"></script>
<script th:src="@{asserts/js/canvas-nest.min.js}"></script>
<script>
    $(document).ready(function () {
        $(".login_username").focus(function () {
            $(this).css("background","url(/asserts/img/icon-user-2.png) no-repeat 10px 10px");
        });
        $(".login_username").blur(function () {
            $(this).css("background","url(/asserts/img/icon-user-1.png) no-repeat 10px 10px");
        });
        $(".login_password").focus(function () {
            $(this).css("background","url(/asserts/img/icon-pass-2.png) no-repeat 10px 10px");
        });
        $(".login_password").blur(function () {
            $(this).css("background","url(/asserts/img/icon-pass-1.png) no-repeat 10px 10px");
        });
        $("#userId").change(function () {
            var selected = $(this).children("option:selected").val();
            if(selected === "student"){
                $(".login_username").attr("placeholder","学号");
                $(".login_password").attr("type","text");
                $(".login_password").attr("placeholder","姓名");
            }else if (selected === "teacher") {
                $(".login_username").attr("placeholder","账号");
                $(".login_password").attr("type","password");
                $(".login_password").attr("placeholder","密码");
            }
        })
        $(".myBtn").click(function () {
            var username = $(".login_username").val();
            var password = $(".login_password").val();
            var password_hold = $(".login_password").attr("placeholder");
            if (username === "" || password === ""){
                $(".errorMsg").text("用户名或"+password_hold+"未输入！");
            }else{
                $("#form").submit();
            }
        });
        $("input").keydown(function (event) {
            if (event.which == 13) {
                var username = $(".login_username").val();
                var password = $(".login_password").val();
                var password_hold = $(".login_password").attr("placeholder");
                if (username === "" || password === "") {
                    $(".errorMsg").text("用户名或"+password_hold+"未输入！");
                } else {
                    $("#form").submit();
                }
            }
        });
    })

</script>
</html>